<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
      }
      .box {
        width: 200px;
        height: 2000px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
  <script>
    // DOM: document object model 文档对象类型
    //和浏览器有关的内容 称为BOM: browser object model 浏览器对象模型
    //dom里 对外有一个顶级对象window
    //window对象 单例模式 全局范围内有且只有一个
    //window对象可以加 也可以省略
    /*  var a = 10;
    console.log(window);
    console.log(window.a);
    console.log(a); */

    //几个弹框
    //1.alert()
    // window.alert("嘻嘻");
    //2.confirm 询问框: 确定 和 取消  如果点了确定 就返回true  否则就返回false
    /*  var res = window.confirm("确定删除吗?");
    console.log(res);
    if (res) {
      console.log("删除了");
    } else {
      console.log("取消了");
    } */

    //3.prompt输入框
    /*  var num = window.prompt("请输入数字");
    console.log(num); */

    //1.获取浏览器的宽和高 innerWidth/innerHeight
    //注意:包含滚动条的宽或者高
    // 获取浏览器的宽;
    console.log(innerWidth);
    //获取浏览器的高
    console.log(innerHeight);

    //2.获取不包含滚动条的宽和高
    console.log(document.documentElement.offsetWidth);
    console.log(document.documentElement.offsetHeight);
  </script>
</html>
